<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Switch 开关</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-space>
		<a-switch v-model:checked="checked1_1"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">文字和图标</a-divider><!-- =============================================================== -->
	<p class="desc">带有文字和图标。</p>
	<a-space direction="vertical">
		<a-switch v-model:checked="state2.checked1" checkedChildren="开" unCheckedChildren="关"></a-switch>
		<a-switch v-model:checked="state2.checked2" checkedChildren="1" unCheckedChildren="0"></a-switch>
		<a-switch v-model:checked="state2.checked3">
			<template #checkedChildren>
				<check-outlined class="ant-icon"></check-outlined>
			</template>
			<template #unCheckedChildren>
				<close-outlined class="ant-icon"></close-outlined>
			</template>
		</a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">加载中</a-divider><!-- =============================================================== -->
	<p class="desc">标识开关操作仍在执行中。</p>
	<a-space direction="vertical">
		<a-switch v-model:checked="state3.checked1" loading></a-switch>
		<a-switch v-model:checked="state3.checked2" size="small" loading></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">不可用</a-divider><!-- =============================================================== -->
	<p class="desc">Switch 失效状态。</p>
	<a-space direction="vertical">
		<a-switch v-model:checked="checked4_1" :disabled="disabled4"></a-switch>
		<a-button type="primary" @click="onToggle4">Toggle disabled</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">两种大小</a-divider><!-- =============================================================== -->
	<p class="desc">size="small" 表示小号开关。</p>
	<a-space direction="vertical">
		<a-switch v-model:checked="state5.checked1"></a-switch>
		<a-switch v-model:checked="state5.checked2" size="small"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">其他的一些用法</a-divider><!-- =============================================================== -->
	<p class="desc">change：变化时回调函数，click：点击时回调函数。</p>
	<p class="desc">checkedValue：选中时的值，unCheckedValue：非选中时的值。</p>
	<a-space direction="vertical">
		<a-switch v-model:checked="state6.checked1"></a-switch>
		<a-switch v-model:checked="state6.checked2" @change="onChange6" @click="onClick6"></a-switch>
		<a-switch v-model:checked="state6.checked3" @change="onChange6" @click="onClick6"
			checkedChildren="开" unCheckedChildren="关" checked-Value="open" un-Checked-Value="close"></a-switch>
	</a-space>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		checked1_1: false,
		state2: {
			checked1: true,
			checked2: false,
			checked3: false,
		},
		state3: {
			checked1: true,
			checked2: false,
		},
		
		checked4_1: true,
		disabled4: true,
		
		state5: {
			checked1: true,
			checked2: false,
		},
		
		state6: {
			checked1: true,
			checked2: false,
			checked3: 'open',
		},
		
	}
},
methods:{
	onToggle4(){
		this.disabled4 = !this.disabled4;
	},
	onChange6(checked, event){
		console.log('onChange6', checked, event);
	},
	onClick6(checked, event){
		console.log('onClick6', checked, event);
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
